<script setup lang="ts">
import {defineProps, ref} from "vue"
import headerTemplate from "../visualization/headerTemplate.vue"
import dateComponent from "../visualization/dateComponent.vue"
import * as echarts from 'echarts';
import chinaConfig from '@/assets/china.js'
import {
  getProjectCount,
  getProjectLineData,
  getProjectMapData, getProjectTypeBar,
  getProjectTypePie, getProjectVisit
} from "@/pages/visualization/index.js";

echarts.registerMap('china', chinaConfig);

const init1 = () => {
  const chartDom = document.getElementById("main");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    // 配置图表
    myChart.setOption(
      {
        tooltip: {
          triggerOn: "click|mousemove",
          formatter: function (e, t, n) {
            return '.5' == e.value ? e.name + "：项目数量" :
              e.name + "<br />" + e.seriesName + "：" + e.value
          }
        },
        visualMap: {
          min: 0,
          max: 10000,
          left: 26,
          bottom: 40,
          showLabel: true,
          text: ["高", "低"],
          textStyle: {
            color: "#BEDAEE"
          },
          pieces: [{
            gt: 1000,
            label: "> 1000项",
            color: "#7f1100"
          }, {
            gte: 100,
            lte: 1000,
            label: "100 - 1000项",
            color: "#ff5428"
          }, {
            gte: 10,
            lt: 100,
            label: "10 - 100项",
            color: "#ff8c71"
          }, {
            gte: 1,
            lt: 10,
            label: "1 - 10项",
            color: "#ffd768"
          }, {
            gte: 0,
            lt: 1,
            label: "0 - 1项",
            color: "#BEDAEE"
          }],
          show: true
        },
        geo: {
          map: 'china',
          roam: true,
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1.13,
          top: 50,
          label: {
            show: true,
            fontSize: "14",
            color: "#fff"
          },
          itemStyle: {
            borderColor: "rgba(0, 0, 0, 0.2)"
          },
          emphasis: {
            areaColor: "#f2d5ad",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 0
          }
        },
        series: [{
          name: "项目数量",
          type: "map",
          geoIndex: 0,
          data: projectMapData.value,
        }]
      }
    );
  } else {
    console.error("DOM 元素未渲染: #main");
  }
}
const projectTypePie = () => {
  var dataList = projectTypeDataPie.value;
  var nameList = ["待审核", "审核通过", "审核不通过", "驳回"];
  var colorList = ["#7b55d8", "#366ccc", "#46b1ce", "#6fd8c9"];
  var lengthList = [];
  nameList.forEach(function (item) {
    lengthList.push({"name": (item).toString(), "icon": "circle"});
  });
  var totalNum = dataList.reduce((prev, curr) => prev + curr);
  var seriesList = [];
  var valList = [];
  dataList.forEach(function (item, index) {
    var obj = {
      value: Math.floor(((item / totalNum * 10000) / 10000) * 100),
      value2: item
    };
    if (index == dataList.length - 1) {
      var total = valList.reduce((prev, curr) => prev + curr);
      obj.value = Number((100 - total).toFixed(2));
      valList.push(obj.value);
    } else {
      valList.push(obj.value);
    }
    seriesList.push({
      name: nameList[index],
      type: 'bar',
      data: [obj],
      stack: 'one',
      coordinateSystem: 'polar',
      roundCap: true,
      zlevel: 20,
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {offset: 0, color: colorList[index]},
              {offset: 1, color: '#ffffff'}
            ]
          },

        }
      },
      emphasis: {
        itemStyle: {

          shadowBlur: 10,
          shadowColor: "rgba(0, 0, 0, 0.5)",

        }
      }
    });
  });
  var center = ['50%', '36%'];
  var radius1 = ['44%', '70%'];
  var radius2 = ['0%', '38%'];
  var titleX = '48%';
  var titleY = '30%';
  var titleSize = 28;
  var legendBottom = "8%";
  seriesList.push({
    name: '外层背景',
    type: 'pie',
    radius: radius2,
    silent: true,
    center: center,
    itemStyle: {
      normal: {
        opacity: 1,
        color: "#ffffff",
      }
    },
    label: {
      normal: {
        show: false,
      },
    },
    data: [{
      value: 0,
      name: '外层背景'
    }]
  });
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.seriesName + ' <br/> ' + params.marker + params.data.value2 + "人 <br/>  " + params.data.value + "%";
      }
    },
    title: [{
      text: '{num|' + totalNum + '}',
      x: titleX,
      y: titleY,
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontSize: titleSize,
            fontWeight: 'bold',
            lineHeight: 30,
            color: '#000000'
          },
        }
      },
    }],
    legend: {
      width: "300",
      x: 'center',
      bottom: legendBottom,
      data: lengthList,
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        lineHeight: 14,
      },
      tooltip: {
        show: true,
        formatter: function (params) {
          var name = params.name;
          var i = nameList.indexOf(name);
          var value = dataList[i];
          var color = colorList[i];
          var marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
          return name + ' <br/> ' + marker + value + ' <br/> ' + valList[i] + "%";
        },
      }
    },
    angleAxis: {
      max: 100,
      clockwise: true,
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
    },
    polar: {
      center: center,
      radius: radius1,
    },
    series: seriesList
  };
  const chartDom = document.getElementById("projectTypePie");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  } else {
    console.error("DOM 元素未渲染: #main");
  }
}
const projectBrowse = () => {
// mock 数据
  const dataArr = projectVisitData.value
  const diamondData = dataArr.result.reduce((pre, cur, index) => {
    pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
    return pre
  }, [])
  const color = [
    [{ offset: 0, color: "#32ffee", }, { offset: 0.5, color: "#32ffee", }, { offset: 0.5, color: "#00e8d5", }, { offset: 1, color: "#00e8d5", }],
    [{ offset: 0, color: "#46c9ff", }, { offset: 0.5, color: "#46c9ff", }, { offset: 0.5, color: "#00b4ff", }, { offset: 1, color: "#00b4ff", }],
  ]

  let series = dataArr.result.reduce((p, c, i, array) => {
    p.push({
      z: i + 1,
      stack: '总量',
      type: 'bar',
      name: c.name,
      barWidth: 15,
      data: c.data,
      itemStyle:{ color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
    },{
      z: i + 10,
      type: 'pictorialBar',
      symbolPosition: 'end',
      symbol: 'diamond',
      symbolOffset: [0, '-50%'],
      symbolSize: [15, 10],
      data: diamondData[i],
      itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
      tooltip: { show: false },
    })

    // 是否最后一个了？
    if (p.length  === (array.length) * 2) {
      p.push({
        z: array.length * 2,
        type: "pictorialBar",
        symbolPosition: "start",
        data: dataArr.result[0].data,
        symbol: "diamond",
        symbolOffset: ["0%", "50%"],
        symbolSize: [15, 10],
        itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0]} },
        tooltip: { show: false },
      })
      return p
    }

    return p
  }, [])

// tooltip
  const tooltip = { trigger: "axis" }

// legend
  const legend = {
    data: dataArr.result.map(item => item.name),
    textStyle: { fontSize: 10, color: '#fff'},
    bottom: 5,
    selectedMode: false,
  }
// grid
  const grid = { top: '10%', left: '10%', right: '3%', bottom: '20%'}

// xAxis
  const xAxis = {
    type: "category",
    axisTick: { show: true },
    axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
    axisLabel: { textStyle: { fontSize: 10, color: '#fff'  }, interval: 0},
    data: dataArr.xdata
  }

// yAxis
  const yAxis = [{
    splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
    axisLine: { show: false, },
    axisLabel: { textStyle: { fontSize: 10, color: '#fff' } }
  }]

// 渲染
 const option = { tooltip, xAxis, yAxis, series, grid, legend}
  const chartDom = document.getElementById("projectBrowse");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  } else {
    console.error("DOM 元素未渲染: #main");
  }
}

const projectTypeBar = () => {
  const chartDom = document.getElementById("projectTypeBar");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: 'horizontal', // 水平布局
        left: 'center',       // 居中
        top: 'bottom',        // 图例显示在下方
        textStyle: {
          color: "#7a869a",
        },
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#ffffff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: projectTypeData.value,
          color: ["#78aaf2", "#aed1f7", "#c3dcf8", "#e4f1fc"],
        },
      ],
    };
    myChart.setOption(option)
  } else {
    console.error("DOM 元素未渲染: #main");
  }
}
const projectCountBar = () => {
  let dateList = projectProgressData.value.dateList;
  let newProject = projectProgressData.value.newProject;
  let totalProject = projectProgressData.value.totalProject;
  let projectRate = projectProgressData.value.projectRate;
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(0, 58, 99, 0.8)", //设置背景颜色
      borderColor: "rgba(0, 58, 99, 0.8)",
      confine: true,
      formatter: `{b}<br>{a}：{c}项<br>{a1}：{c1}项<br>{a2}：{c2}%`,
    },
    legend: {
      itemWidth: 12,
      itemHeight: 8,
      itemGap: 20,
      right: "2%",
      top: "3%",
      x: "center",
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
      data: ["新增项目", "累计项目", "占比"],
      selectedMode: false,
    },
    grid: {
      top: "16%",
      left: "2%",
      right: "2%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: dateList,
      axisLabel: {
        color: "#A4A7AA",
        interval: 0,
        fontSize: 12,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(127, 214, 255, .4)",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "value",
        name: "项数 / 项",
        splitNumber: 5,
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 20, 5, 0],
        },
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 14,
            color: "#fff",
            lineHeight: 16,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(28, 130, 197, .3)",
            type: "dashed",
          },
        },
      },
      {
        name: "占比 / %",
        splitNumber: 5,
        max: 100,
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 0, 5, 0],
        },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "新增项目",
        type: "bar",
        data: newProject,
        barWidth: "15px",
        barGap: "50%",
        itemStyle: {
          normal: {
            borderColor: "#3681FF",
            color: new echarts.graphic.
            LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(15, 51, 82, 1)",
              },

              {
                offset: 1,
                color: "rgba(0, 168, 255, 1)",
              },
            ]),
          },
        },
        label: {
          show: false,
          position: "top",
          fontSize: 12,
          color: "#F5F5F5",
          offset: [0, -5],
          formatter: "{c}",
        },
      },
      {
        name: "累计项目",
        type: "bar",
        data: totalProject,
        barWidth: "15px",
        barGap: "50%",
        itemStyle: {
          normal: {
            borderColor: "rgba(54, 234, 255, 1)",
            color: new echarts.graphic.
            LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(15, 51, 82, 1)",
              },

              {
                offset: 1,
                color: "rgba(21, 219, 203, 1)",
              },
            ]),
          },
        },
        label: {
          show: false,
          position: "top",
          fontSize: 12,
          color: "#F5F5F5",
          offset: [0, -5],
          formatter: "{c}",
        },
      },
      {
        name: "占比",
        type: "line",
        yAxisIndex: 1,
        showSymbol: true,
        symbolSize: 8,
        smooth: true,
        symbol: "circle",
        lineStyle: {
          normal: {
            color: "#02D6B0",
          },
        },
        itemStyle: {
          color: "#02D6B0",
          borderColor: "#fff",
          borderWidth: 1,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 255, 246, 0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 246, 0)",
                },
              ],
              false
            ),
          },
        },
        data: projectRate, // 折线图的数据
      },
    ],
  };
  const chartDom = document.getElementById("projectType");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  } else {
    console.error("DOM 元素未渲染: #main");
  }

}
const startTime = ref('2025')
const endTime = ref('2025')
const type=ref('year')
const handleClick = (date, dateType) => {
  type.value = dateType;
  if (dateType !== 'year'){
    startTime.value =date[0];
    endTime.value = date[1];
  }else {
    startTime.value = date;
  }
  getProjectData();
  getProjectProgressData();
  getProjectMapDataList();
  getProjectTypeData();
  getProjectTypeDataBar();
  getProjectVisitData();
}
// 获取项目数据统计
const projectData = ref({
  project: {
    totalCount: 0,
    loginCount: 0,
    newCount: 0,
    activeCount: 0
  },
  projectProgress: {
    totalCount: 0,
    loginCount: 0,
    newCount: 0,
    activeCount: 0
  },
})
const getProjectData = async () => {
  await getProjectCount({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res => {
    projectData.value = res.data
  })
}
// 项目折线图数据统计
const projectProgressData = ref('')
const getProjectProgressData = async () => {
  await getProjectLineData({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res => {
    projectProgressData.value = res.data;
    projectCountBar();
  })
}

// 项目地图数据统计
const projectMapData = ref('')
const getProjectMapDataList = async () => {
  await getProjectMapData({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res => {
    projectMapData.value = res.data;
    init1();
  })
}

// 项目占比统计
const projectTypeDataPie = ref('')
const getProjectTypeData = async () => {
  await getProjectTypePie({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res => {
    projectTypeDataPie.value = res.data;
    projectTypePie();
  })
}

// 项目类型数量及占比
const projectTypeData = ref('')
const getProjectTypeDataBar = async () => {
  await getProjectTypeBar({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res => {
    projectTypeData.value = res.data;
    projectTypeBar();
  })
}

// 项目浏览量和访问量
const projectVisitData = ref('')
const getProjectVisitData = async () => {
  await getProjectVisit({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res => {
    projectVisitData.value = res.data;
    projectBrowse();
  });
}
onMounted(() => {
  getProjectData();
  getProjectProgressData();
  getProjectMapDataList();
  getProjectTypeData();
  getProjectTypeDataBar();
  getProjectVisitData();
});
</script>

<template>
  <header-template :title="'项目管理可视化'"/>
  <div class="bodyContent" style="margin-top: -55px;color: white">
    <date-component @change="handleClick"/>
    <div style="display: flex;">
      <div class="common statistics">
        <div class="userTitle">
          <span class="text">项目数据统计</span>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div>
          <span class="fangkuaiText">项目统计</span>
        </div>
        <div style="display: flex;">
          <div style="margin-left: 10px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/projectType.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>累计项目</span>
                <div>{{projectData.project.totalCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/projectType.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>访问数</span>
                <div>{{projectData.project.loginCount}}人</div>
              </div>
            </div>
          </div>
          <div style="margin-left: 15px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/prjectype1.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>项目新增</span>
                <div>{{projectData.project.newCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/prjectype1.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>浏览量</span>
                <div>{{projectData.project.activeCount}}人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div>
          <span class="fangkuaiText">项目进度统计</span>
        </div>
        <div style="display: flex">
          <div style="margin-left: 10px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/projectType.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>待审核</span>
                <div>{{projectData.projectProgress.totalCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/projectType.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>审核不通过</span>
                <div>{{projectData.projectProgress.loginCount}}人</div>
              </div>
            </div>
          </div>
          <div style="margin-left: 25px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/prjectype1.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>审核通过</span>
                <div>{{projectData.projectProgress.newCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/prjectype1.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>驳回</span>
                <div>{{projectData.projectProgress.activeCount}}人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div>
          <span class="fangkuaiText">项目统计</span>
        </div>
        <div id="projectType" style="width: 100%;height: 300px"></div>
      </div>
      <div class="common" style="width: 750px;height: 88vh;">
        <div class="userTitle">
          <span class="text">项目数据地图统计</span>
        </div>
        <div id="main" style="width: 750px;height:88vh;"></div>
      </div>
      <div class="common" style="width: 355px;height: 88vh;">
        <div class="userTitle">
          <span class="text">项目占比统计</span>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div>
          <span class="fangkuaiText">项目数量及占比</span>
        </div>
        <div id="projectTypePie" style="width: 355px;height: 200px"></div>
        <div class="statisticsContent">
          <div class="fangkuai"></div>
          <span class="fangkuaiText">项目类型数量及占比</span>
        </div>
        <div id="projectTypeBar" style="width: 355px;height: 190px"></div>
        <div class="statisticsContent">
          <div class="fangkuai"></div>
          <span class="fangkuaiText">项目浏览量及访问数</span>
        </div>
        <div id="projectBrowse" style="width: 355px;height: 270px"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bodyContent {
  height: 98%;
  background: url("../visualization/Image/EmergencyCommand.png");
  background-size: cover;
}

.common {
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid deepskyblue;
  border-radius: 5px;
  box-shadow: 2px 2px 5px whitesmoke;
}

.statistics {
  width: 450px;
  height: 88vh;
}

.userTitle {
  height: 30px;
  margin-left: 10px;
  color: white;
  background: url("../visualization/Image/douwbloe.png");
  background-size: cover;
}

.text {
  margin-left: 20px;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
}

.fangkuai {
  display: flex;
  margin: 10px 0 10px 10px;
  width: 5px;
  height: 20px;
  background: #409eff;
}

.statisticsContent {
  display: flex;
}

.fangkuaiText {
  margin-top: 11px;
  font-size: 15px;
  margin-left: 5px;
}

.statisticsBox {
  display: flex;
  align-items: center;
  margin-right: 50px;
}

.statisticsBox img {
  width: 80px;
  height: 80px;
}

.statisticsBox .textBox {
  margin-left: 20px;
}

.textBox span {
  font-size: 13px;
}

.textBox div {
  color: #AEEEEE;
  font-size: 20px;
}


</style>
